<template>
    <div>
      <h3 style="color: cornflowerblue;">活动列表</h3>
      <div class="activities-list">
        <div v-for="(item, index) in activitiesList" :key="index" class="card">
          <h4>{{ item.title }}</h4>
          <p>{{ item.description }}</p>
          <p><strong>日期:</strong> {{ new Date(item.activityDate).toLocaleString() }}</p>
          <p><strong>地点:</strong> {{ item.location }}</p>
          <p><strong>组织者:</strong> {{ item.organizer }}</p>
          <p><strong>联系信息:</strong> <a :href="'mailto:' + item.contactInfo">{{ item.contactInfo }}</a></p>
          <p v-if="item.registrationLink"><strong>报名链接:</strong> <a :href="item.registrationLink" target="_blank">点击这里</a></p>
          <p v-if="item.status === 0" style="color: green;"><strong>状态:</strong> 即将举行</p>
          <p v-else-if="item.status === 1" style="color: orange;"><strong>状态:</strong> 进行中</p>
          <p v-else-if="item.status === 2" style="color: blue;"><strong>状态:</strong> 已完成</p>
          <p v-else style="color: red;"><strong>状态:</strong> 已取消</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    activitiesList: Array,
  });
  </script>
  
  <style scoped>
  .activities-list {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 15px;
  }
  
  .card {
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 4px;
  }
  </style>